<!DOCTYPE html>

<html>

  <head>
    <meta charset="utf-8">
    <title>后台管理模板</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">

    <link rel="stylesheet" href="__TPLPATH__/Public/beg/plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="__TPLPATH__/Public/beg/css/global.css" media="all">
    <link rel="stylesheet" href="__TPLPATH__/Public/beg/plugins/font-awesome/css/font-awesome.min.css">

  </head>

  <body>
    <div class="layui-layout layui-layout-admin">
      <div class="layui-header header header-demo">
        <div class="layui-main">
          <a class="logo" style="left: 0;" href="http://beginner.zhengjinfan.cn/demo/beginner_admin/">
            <span style="font-size: 22px;color:#fff">天机后台管理</span>
          </a>
          <ul class="layui-nav">
            <li class="layui-nav-item">
              <a href="javascript:;">清除缓存</a>
            </li>
            <li class="layui-nav-item">
              <a href="#" target="_blank">浏览网站</a>
            </li>
            <li class="layui-nav-item">
              <a href="javascript:;" class="admin-header-user">
                <img src="images/0.jpg" style="width: 40px; height: 40px; border-radius: 100%;" />
                <span>beginner</span>
              </a>
              <dl class="layui-nav-child">
                <dd>
                  <a href="javascript:;"><i class="fa fa-user-circle" aria-hidden="true"></i> 个人信息</a>
                </dd>
                <dd>
                  <a href="javascript:;"><i class="fa fa-gear" aria-hidden="true"></i> 设置</a>
                </dd>
                <dd>
                  <a href="login.html"><i class="fa fa-sign-out" aria-hidden="true"></i> 注销</a>
                </dd>
              </dl>
            </li>
          </ul>
        </div>
      </div>
      <div class="layui-side layui-bg-black" id="admin-side">
        <div class="layui-side-scroll" id="admin-navbar-side" lay-filter="side">
          <div class="user-looklog" style="padding-bottom:20px;">
        <h3>用户信息  USER INFO</h3>
        <div></div>

        <div class="user_info" >
          <p>{$_SESSION['user']['username']}</p>
          <p><button class="layui-btn layui-btn-primary layui-btn-mini">个人设置</button></p>
          <p><button class="layui-btn layui-btn-mini layui-btn-normal" href="{:U('Admin/Login/logout')}">退出登录</button></p>
        
        </div>
        
      <span>
          <a href="{:U('Admin/Index/index')}">
            <img src="__ROOT__{$_SESSION['user']['avatar']}"class="layui-circle">

            <cite>用户ID:{$user_info['id']}</cite>
            <i>{$user_info['register_time']|date="Y-m-d H:i",###}</i>
          </a>
          
        </span>
        </div>
        <ul class="layui-nav layui-nav-tree admin-nav-tree">
            <foreach name="data" item="v">
              <empty name="v['_data']">
            <li class="layui-nav-item layui-nav-itemed">
              <a href="javascript:;">{$v['name']}</a>
            </li>
              <else />
              <li class="layui-nav-item">
                <a href="javascript:;">{$v['name']}</a>
              <dl class="layui-nav-child">
                <foreach name="v['_data']" item="n">
                <dd>
                  <a href="javascript:;" data-url="{:U($n['mca'])}">
                    <i class="layui-icon" style="top: 1px; font-size: 18px;">{$n['ico']}</i>
                    <cite>{$n['name']}</cite>
                  </a>
                </dd>
                </foreach>
              </dl>
            </li>
            </empty>
        </foreach>
            
            <li class="layui-nav-item">
              <a href="javascript:;">这是一级导航</a>
            </li>
          </ul>
        </div>
      </div>
      <div class="layui-body" style="bottom: 0;border-left: solid 2px #1AA094;" id="admin-body">
        <div class="layui-tab admin-nav-card layui-tab-brief" lay-filter="admin-tab">
          <ul class="layui-tab-title">
            <li class="layui-this">
              <i class="fa fa-dashboard" aria-hidden="true"></i>
              <cite>控制面板</cite>
            </li>
          </ul>
          <div class="layui-tab-content" style="min-height: 150px; padding: 5px 0 0 0;">
            <div class="layui-tab-item layui-show">
              <iframe src="{:U('Admin/Index/welcome')}"></iframe>
            </div>
          </div>
        </div>
      </div>
      <div class="layui-footer footer footer-demo">
        <div class="layui-main">
          <p>2016 &copy;
            <a href="http://beginner.zhengjinfan.cn/demo/beginner_admin/">beginner.zhengjinfan.cn</a> LGPL license
          </p>
        </div>
      </div>
      <div class="site-tree-mobile layui-hide">
        <i class="layui-icon">&#xe602;</i>
      </div>
      <div class="site-mobile-shade"></div>
      <script type="text/javascript" src="__TPLPATH__/Public/beg/plugins/layui/layui.js"></script>
      <script>
        layui.config({
          base: '__TPLPATH__/Public/beg/js/'
        }).use(['element', 'layer', 'navbar'], function() {
          var element = layui.element(),
            $ = layui.jquery,
            layer = layui.layer,
            navbar = layui.navbar();

          //navbar.render();
          //iframe自适应
          $(window).on('resize', function() {
            var $content = $('.admin-nav-card .layui-tab-content');
            $content.height($(this).height() - 147);
            $content.find('iframe').each(function() {
              $(this).height($content.height());
            });
          }).resize();
          //设置navbar
          navbar.set({
            elem: '#admin-navbar-side',
            url: 'datas/nav.json'
          });
          //渲染navbar
          navbar.render();
          var $body = $('.admin-nav-card');
          var $tabs = $body.children('ul.layui-tab-title');
          var $contents = $body.children('div.layui-tab-content');
          var tabFilter = 'admin-tab';
          //监听点击事件
          navbar.on('click(side)', function(data) {
            var href = data.field.href;
            if(href === undefined || href === '') {
              return;
            }
            var iframe = '<iframe src="' + href + '"></iframe>';
            var html = data.elem.html();
            var count = 0;
            var tabIndex;
            console.log($tabs);
            $tabs.find('li').each(function(i, e) {
              var $cite = $(this).children('cite');
              if($cite.text() === data.elem.find('cite').text()) {
                count++;
                tabIndex = i;
              };
            });
            //tab不存在
            if(count === 0) {
              //添加删除样式
              html += '<i class="layui-icon layui-unselect layui-tab-close">&#x1006;</i>';
              //添加tab
              element.tabAdd(tabFilter, {
                title: html,
                content: iframe
              });
              //iframe 自适应
              var $content = $('.admin-nav-card .layui-tab-content');
              $content.find('iframe').each(function() {
                $(this).height($content.height());
              });
              //绑定关闭事件
              $tabs = $body.children('ul.layui-tab-title');
              var $li = $tabs.find('li');
              $li.eq($li.length - 1).children('i.layui-tab-close').on('click', function() {
                element.tabDelete(tabFilter, $(this).parent('li').index()).init();
              });
              //获取焦点
              element.tabChange(tabFilter, $li.length - 1);

            } else {
              //切换tab
              element.tabChange(tabFilter, tabIndex);
            }
          });

          $('.admin-side-toggle').on('click', function() {
            console.log($('#admin-side').width());
            console.log($('#admin-body').css('left'));
            var sideWidth = $('#admin-side').width();
            if(sideWidth === 200) {
              $('#admin-side').width(0);
              $('#admin-body').css('left', '0');
            } else {
              $('#admin-side').width(200);
              $('#admin-body').css('left', '200px');
            }

          });

          //手机设备的简单适配
          var treeMobile = $('.site-tree-mobile'),
            shadeMobile = $('.site-mobile-shade');
          treeMobile.on('click', function() {
            $('body').addClass('site-mobile');
          });
          shadeMobile.on('click', function() {
            $('body').removeClass('site-mobile');
          });
        });
      </script>
    </div>
  </body>

</html>